<template>
  <div class="div_div_box">
    <div class="fd">
      <div class="baglist">
        <img src="../assets/返回(1).png" class="images" @click="imgedit" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in infolist" :key="index">
            <img src="../assets/info.jpg" width="400px" />
          </van-swipe-item>
        </van-swipe>
        <p class="p_bag">{{ infolist.basicInfo.characteristic }}</p>
        <p class="p_bags">
          <span>低价￥{{ infolist.basicInfo.kanjiaPrice }}</span>
          <span>原价￥{{ infolist.basicInfo.kanjiaPrice }}</span>
        </p>
      </div>
      <!-- 选项卡 -->
      <van-tabs>
        <van-tab title="商品介绍 ">
          <div v-html="infolist.content" class="div_content"></div>
        </van-tab>
        <van-tab title="商品评价"> 你猜 </van-tab>
      </van-tabs>
    </div>
    <!-- 底部加入购物车 -->
    <div class="div_bottom_box">
      <ul>
        <li><img src="../assets/客服.png" /></li>
        <li><img src="../assets/购物车 (1).png" /></li>
        <li><img src="../assets/双叶子.png" /></li>
        <li @click="addicon">立即购买</li>
        <li @click="add_shopping_box">加入购物车</li>
      </ul>
      <!-- 底部弹出层 -->
      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <!-- 商品 -->
        <div class="div_icon_bottom">
          <img :src="infolist.basicInfo.pic" alt="" />
          <div>
            <p class="div_icon_p1">{{ infolist.basicInfo.name }}</p>
            <p class="div_icon_p2">￥{{ infolist.basicInfo.minPrice }}</p>
          </div>
        </div>

        <!-- 牛仔外套 -->
        <div class="div_NZ">
          <h1>牛仔外套</h1>
          <ol>
            <li>M （170/88A）</li>
            <li>L （175/92A）</li>
            <li>XL （180/96A）</li>
          </ol>
        </div>

        <!-- 购买数量 -->
        <div class="div_nums">
          <h1>购买数量</h1>
          <div></div>
          <!-- 加减 -->
          <van-stepper />
        </div>

        <!-- 立即购买 -->
        <button class="btn" @click="add_shoplist">添加购物车</button>
      </van-popup>
    </div>
  </div>
</template>
<script>
import mixin from "../store/index";
export default {
  //混入数组
  mixins: [mixin],
  data() {
    return {
      infolist: [],
      show: false,
      addiconList: [],
    };
  },
  mounted() {
    var id = this.$route.query.id;
    console.log(id);
    this.$APL.DETAILPOST(id).then((res) => {
      console.log(res.data);
      this.infolist = res.data.data;
    });

    //弹出层
    this.getStoreList(); //购物车数据
  },
  methods: {
    imgedit() {
      window.history.back();
    },

    //立即购买
    addicon() {
      this.show = true;
    },
    // 加入购物车
    add_shoplist() {
      this.$router.push({
        path: "/shopping",
        query: this.infolist.basicInfo.id,
      });
      console.log(this.infolist.basicInfo.id);
    },
    add_shopping_box() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss">
.baglist {
  background: white;
}
// 弹出层
.div_icon_bottom {
  width: 100%;
  display: flex;
  margin: 0.3rem;
  border-bottom: 1px solid gainsboro;
  img {
    width: 2rem;
    height: 2rem;
  }
  p {
    margin: 0.5rem;
    &:nth-child(2) {
      color: red;
    }
  }
}
//牛仔外套
.div_NZ {
  width: 100%;
  margin: 0.2rem;
  border-bottom: 1px solid gainsboro;
  ol {
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 100%;
    align-items: center;
    li {
      width: 30%;
      height: 0.5rem;
      line-height: 0.5rem;
      border-radius: 0.5rem;
      text-align: center;
      margin: 0.2rem;
      border: 1px solid gainsboro;
    }
  }
}
//购买数量
.div_nums {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
//立即购买
.btn {
  width: 100%;
  height: 1rem;
  background: #b7282e;
  color: white;
  border: 0;
}

.images {
  width: 40px;
  position: absolute;
  z-index: 999;
}
.p_bag {
  font-size: 0.3rem;
  margin: 0.3rem;
}
.p_bags {
  margin: 0.3rem;
  span {
    padding: 0.2rem;
    &:nth-child(1) {
      color: red;
    }
    &:nth-child(2) {
      color: gainsboro;
    }
  }
}
.div_da {
  background: white;
  width: 100%;
}
.div_xuan {
  width: 100%;
  height: 1rem;
  // background: wheat;
  display: flex;
  line-height: 1rem;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  p {
    width: 50%;
    height: 100%;
    // background: chocolate;
    font-size: 0.4rem;
    &:hover {
      border-bottom: 2px solid lightcoral;
    }
  }
}
.div_content {
  width: 100%;
  li {
    width: 100%;
    display: flex;
    margin: 0.2rem;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.fd {
  width: 100%;
  height: 94vh;
  position: relative;
  overflow: scroll;
}
.div_bottom_box {
  width: 100%;
  height: 6vh;
  // background: rgb(243, 235, 235);
  overflow: scroll;
  z-index: 999999;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
      border: 1px solid gainsboro;
      width: 20%;
      height: 100%;
      line-height: 1rem;
      text-align: center;
      font-size: 0.25rem;
      img {
        width: 20px;
      }
      &:last-child {
        background: #b7282e;
        color: white;
      }
    }
  }
}
</style>